<template>
  <div class="news-view">
    <loading :show="loading" />
    <arrow v-if="false" />
    <v-title :title="detail.title" :is-center="false" />
    <div class="view">
      <div class="date">发布时间: {{ detail.create_time }}</div>
      <div class="text" v-html="detail.inText"></div>
      <ul class="images" v-if="detail.inImages && detail.inImages.length > 0">
        <li
          v-for="(item, index) in detail.inImages"
          :key="index"
        >
          <div class="image">
            <img v-lazy="item" />
          </div>
        </li>
      </ul>
      <div class="amount">
        奖励:
        <span>{{ detail.amount }}</span>
      </div>
      <div class="num">
        已接收人数:
        <span>{{detail.num}}</span>
      </div>
      <div class="btn">
        <cube-button primary @click="saveTask" :disabled="disabled">{{ disabled ? '已经接收过了' : '接收任务' }}</cube-button>
      </div>
    </div>
  </div>
</template>

<script>
import Title from '@/components/Title'
import Arrow from '@/components/Arrow'
import Loading from '@/components/Loading'
import api from '@/api'
import base64 from '@/util/base64'
import scroll from '@/util/scroll'
export default {
  name: 'TaskView',
  components: {
    'v-title': Title,
    Arrow,
    Loading,
  },
  data() {
    return {
      loading: false,
      detail: {
        title: this.$route.meta.title || ''
      },
      disabled: false
    }
  },
  methods: {
    fetch() {
      this.loading = true
      api.Task.view({ id: this.$route.params.id }).then(response => {
        let { data } = response
        data = base64.parse(data)
        Object.assign(this.detail, { ...data })
      }).finally(() => {
        this.loading = false
      })
    },
    check() {
      api.Task.check({ id: this.$route.params.id }).then(response => {
        let { data } = response
        data = base64.parse(data)
        if (data.check) {
          this.disabled = true
        }
      }).finally(() => {
      })
    },
    saveTask() {
      if (!this.disabled) {
        this.disabled = true
        this.loading = true
        api.Task.save({ id: this.$route.params.id }).then(() => {
          this.$createToast({
            txt: '操作成功',
            mask: true,
            type: 'correct',
            time: 500,
            onTimeout: () => {
              this.$router.push('/service/task/1')
            }
          }).show()
          this.$set(this.detail, 'num', +this.detail.num + 1)
        }).catch(() => {
          this.disabled = false
        }).finally(() => {
          this.loading = false
        })
      }
    }
  },
  activated () {
    this.fetch()
    this.check()
    scroll.toTop()
  },
  deactivated() {
    this.disabled = false
  }
}
</script>

<style scoped lang="stylus">
.news-view
  padding-top 45px
  padding-bottom 20px
  .view
    margin 10px
    padding 10px
    background white
    border-radius 10px
    .date
      color #ccc
      height 30px
      line-height 30px
    .text
      margin 15px 0
    .num
      height 60px
      line-height 60px
      text-align left
      font-size 14px
      font-weight 700
      span
        color red
    .amount
      text-align left
      font-size 20px
      font-weight 700
      margin 10px 0
      span
        color red
    .btn
      text-align left
      button
        letter-spacing 2px
        font-weight 700
</style>
